<template>
	<div id="tmpl">
		<div class="mui-content" style="background-color:#fff">
		    <ul class="mui-table-view mui-grid-view">
		        <li class="mui-table-view-cell mui-media mui-col-xs-6" v-for="item in list">
		            <router-link v-bind="{to:'/goods/goodsinfo/'+item.id}">
		                <img class="mui-media-object" :src="item.img_url">
		                <div class="mui-media-body" v-text="item.title"></div>
		                <div id="desc">
		                	<p><span style="color:red">￥{{item.sell_price}}</span><s>￥{{item.market_price}}</s></p>
		                	<p><span class="fl">热卖中</span><span class="fr" style="color:green">剩余<u style="color:red">{{item.stock_quantity}}</u>件</span></p>
		                </div>
		            </router-link>
		        </li>
		    </ul>    
		</div>
		<mt-button type="danger" size="large" plain @click="getmore">加载更多</mt-button>

	</div>
</template>
<script>
import {Toast} from 'mint-ui';
import common from '../../kits/common.js';
	export default{
		data(){
			return{
				list:[],
				pageindex:1,
			}
		},
		created(){
			this.getlist();
		},
		methods:{
			getlist(pageindex){
				var url = common.apidomain+'/api/getgoods?pageindex='+this.pageindex;
				this.$http.get(url).then(function(response) {
					var data = response.body;
					if (data.status!=0) {
						Toast(data.message);
						return;
					}
					this.list = data.message;
				})
			},
			getmore(){
				this.pageindex++;
				this.getlist(this.pageindex);
			}
		}
	}
</script>
<style scoped>
	.mui-content li {
		box-sizing:border-box;
		border: 1px solid rgba(0,0,0,.2);
		margin-left: 4px;
		box-shadow: 0 0 2px #000;
	}

	#desc{
		margin: 5px 0;
		height: 50px;
		background-color:#efeff4;		
	}
	#desc p:last-child span {
		margin-top: 7px;
		color:orange;	
	}
	#desc s {
		margin-left: 30px;
	}
	.mui-table-view.mui-grid-view .mui-table-view-cell .mui-media-body{
		color:#0094ff;
	}
	.mui-table-view.mui-grid-view .mui-table-view-cell{
		text-align: left;
	}
	.fl {
		float: left;
	}
	.fr {
		float: right;
	}
	.mui-table-view-cell > a:not(.mui-btn) {
		padding:2px 5px;
	}
</style>